<template>
  <div>

    <PositionSearch @add-position="addPosition" @batch-remove="batchRemove"
                    v-model="search" @search="page =1; queryPositions()"/>

    <!-- 引入表格 -->
    <Table border :columns="columns" :data="data" @on-selection-change="selection = $event">

      <template #action="{ row, index }">
        <!--
        <Button type="success" icon="md-walk" size="small" style="margin-right: 5px" @click="referenceOrg(row)">关联根组织机构</Button>
        -->
        <Button v-auth:position:update type="primary" icon="ios-create-outline" size="small" style="margin-right: 5px" @click="editPosition(row)">修改</Button>
        <Button v-auth:position:delete type="error" icon="ios-remove-circle-outline" size="small" @click="remove(row, index)">移除</Button>
      </template>

      <template #status="{ row, index }">
        <DotTag type="primary" v-if="row.state">正常</DotTag>
        <DotTag type="error" v-else>失效</DotTag>
      </template>

      <template #footer>
        <div style="min-width: 300px; max-width: 380px;">
          <van-pagination v-model="page" :total-items="total"
                          :items-per-page="rows" @page-click="queryPositions"
                          :show-page-size="5" force-ellipses />
        </div>
      </template>
    </Table>

    <Drawer
        :title="drawer.title"
        v-model="drawer.state"
        width="420"
        :mask-closable="false"
        :styles="{height: 'calc(100% - 55px)',overflow: 'auto',paddingBottom: '53px',position: 'static'}">

      <!-- 引入菜单表单组件 -->
      <PositionForm ref="position" @close-win="closeWin" :drawer="drawer.row"></PositionForm>

    </Drawer>

    <!--  暂不实现和组织机构的关联绑定  -->
    <BindOrganization v-model="bind.modalValue" :position-id="bind.positionId"/>

  </div>
</template>
<script>
import PositionForm from '../components/position/PositionForm.vue'
import PositionSearch from "../components/position/PositionSearch.vue";
import DotTag from '../components/DotTag.vue'
import VanPagination from "../components/VanPagination.vue";

export default {
  data() {
    return {
      drawer: {
        state: false,
        title: "添加职务",
        row: {name: "", description: "", state: true},
      },
      bind: {
        modalValue: false,
        positionId: -1 , // 职务ID
      },
      page: 1,
      total: 0,
      rows: 10 ,
      selection: [],  //选中的节点
      search: {} , // 搜索内容
      columns: [
        {type: "selection", width: 60, align: 'center'},
        {title: '职务名', key: 'name', width: 240,},
        {title: '职务描述', key: 'description'},
        {title: '状态', slot: 'status', width: 120,},
        {title: '录入时间', key: 'createTime', width: 180,},
        {title: '操作', slot: 'action', width: 180, align: 'center'}
      ],
      data: [],
    }
  },
  created() {
     this.queryPositions();
  },
  methods: {
    queryPositions() {
       this.$api.queryPositions({
         page: this.page,
         rows: this.rows,
         ...this.search
       }).then(ret=> {
          if (ret.data.status) {
            this.data = ret.data.data.list ;
            this.total = ret.data.data.total ;
          }
       })
    },
    addPosition(){
      this.drawer.state = true ;
      this.drawer.title = "添加职务" ;
      this.drawer.row = {name: "", description: "", state: true}
    },
    referenceOrg(row){
       // 弹出 绑定容器
       this.bind.modalValue = true ;
       this.bind.positionId = row.id ; // 传入职务ID
    },
    editPosition(row) {
      this.drawer.state = true ;
      this.drawer.title = "修改职务" ;
      this.drawer.row = {...row}
    },
    batchRemove() {
      if (this.selection.length === 0) {
        this.$tips.warning("请至少选中一个需要删除的职务");
      }else{
        this.$tips.confirm("您确定要删除选中的所有职务吗?").then(() => {
          // 删除多个系统
           this.$api.batchDelPosition(this.selection.map(s => s.id)).then(ret=> {
              if (ret.data.status) {
                this.$tips.success("删除成功") ;
                this.queryPositions() ;
              }
           })
        })
      }
    },
    remove(row, index) {
      this.$tips.confirm("您确定要删除选中的职务吗?").then(()=> {
         this.$api.deletePosition(row.id).then(ret=> {
           if (ret.data.status) {
             this.$tips.success("删除成功") ;
             this.queryPositions() ;
           }
         })
      })
    },
    closeWin(status) {
      this.drawer.state = false;
      this.$refs.position.resetValidForm();
      this.queryPositions();
    }
  },
  components: {
    VanPagination,
    PositionSearch,
    PositionForm,
    DotTag,
  }
}
</script>
